<template>
  <div class="slide-wrap">
    <a-button
      class="left-btn slide-btn"
      @click="handleBtn('prev')"
      :disabled="swiperBeginning"
      :icon="h(LeftOutlined)"
    ></a-button>
    <div class="list">
      <swiper
        :slidesPerView="'auto'"
        ref="swiperRef"
        @progress="handleProgress"
      >
        <swiper-slide v-for="(item,index) in data" :key="index">
          <div class="item">
            <img :src="item.name" class="lbimgs" />
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <a-button
      class="right-btn slide-btn"
      @click="handleBtn('next')"
      :disabled="swiperEnd"
      :icon="h(RightOutlined)"
    ></a-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, h, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { debounce } from 'lodash-es';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';

const props = defineProps(['data']);
const emit = defineEmits(['choose']);

const swiperRef = ref<null | HTMLElement>(null);

let swiperEl: any = ref({ isBeginning: false, isEnd: false });

const handleSwiper = () => {
  if (swiperRef.value) {
    const { isBeginning = true, isEnd = true } = swiperEl.value || {};
    slideChange({ isBeginning, isEnd });
  }
};

// 监听swiper的progress事件
const progress = (swiper: any) => {
  swiperEl.value = swiper;
  handleSwiper();
};
const handleProgress = debounce(progress, 100);

const activeId = ref();
const handleItem = (item: any) => {
  if (item) {
    activeId.value = item.id;
    emit('choose', item);
  }
};

onMounted(() => {
  const first = props.data[0];
  handleItem(first);
});

const handleBtn = (type: string) => {
  if (swiperRef.value) {
    if (swiperEl.value && typeof swiperEl.value.slidePrev === 'function') {
      if (type === 'prev') {
        swiperEl.value.slidePrev();
      } else if (type === 'next') {
        swiperEl.value.slideNext();
      }
    }
  }
};

const swiperBeginning = ref(true);
const swiperEnd = ref(true);

function slideChange(val: { isBeginning: boolean; isEnd: boolean }) {
  const { isBeginning, isEnd } = val;
  swiperBeginning.value = isBeginning;
  swiperEnd.value = isEnd;
}
</script>

<style scoped lang="less">
.slide-wrap {
  display: flex;
  padding: 15px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 4px 4px 0 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;

  .slide-btn {
    width: 36px;
    height: 56px;
    &[disabled='true'] {
      cursor: not-allowed;
    }
  }
  .list {
    flex: 1;
    overflow: hidden;
    padding: 0 10px;
  }
}
.swiper {
  position: relative;

  .swiper-slide {
    width: fit-content;
    &:first-of-type {
      .item {
        margin-left: 0;
      }
    }
    &:last-of-type {
      .item {
        margin-right: 0;
      }
    }
  }
}
.item {
  padding: 0 10px;
  span {
    display: inline-block;
    white-space: nowrap;
    width: fit-content;
    min-width: 100px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background-color: #f0f0f0;
    border-radius: 40px;
    padding: 0 10px;
    cursor: pointer;

    &.active {
      background-color: #1677ff;
      color: #fff;
    }
  }
  .lbimgs {
    width: 100px;
    height: 140px;
  }
}

html[data-theme='dark'] .item span {
  color: #000;

  &.active {
    color: #fff;
  }
}
</style>
